<template>
  <div class="main">
    <div class="top">
      <div class="top-left">
        <el-card class="card">
          <p>总资产</p>
          <p class="bold">￥{{ totalPrice }}</p>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </el-card>
        <el-card class="card">
          <p>钱包</p>
          <p class="bold">
            ￥{{ electronicPrice }}
            &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
            <el-button type="success" @click="centerDialogVisible = true">充值</el-button>
          </p>

          <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </el-card>
        <el-card class="card">
          <p>理财金额</p>
          <p class="bold">￥{{ financiaPrice }}</p>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </el-card>
        <el-card class="card">
          <p>银行卡余额</p>
          <p class="bold">
            <el-select
              v-model="backCard"
              placeholder="Select"
              style="width: 240px"
            >
              <el-option
                v-for="item in bankcardList"
                :key="item.id"
                :label="'卡号：' + item.bankCard + '  余额' + item.balance"
                :value="item.bankCard"
              />
            </el-select>
          </p>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="red">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="top-right">
        <el-card class="card">
          <div id="main1"></div>
        </el-card>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <el-card class="card">
          <div id="main2"></div>
        </el-card>
      </div>
      <div class="bottom-right">
        <el-card class="card">
          <div id="main3"></div>
        </el-card>
      </div>
    </div>
    <el-dialog
        v-model="centerDialogVisible"
        title="充值"
        width="300px"
        center
    >
      <span>
        <el-form>
          <el-form-item prop="金额">
             <el-input
                 v-model="rechargeBalance"
                 placeholder="请输入充值金额"
                 style="width: 150px;margin-left: 50px"
             ></el-input>
          </el-form-item>
          <el-form-item prop="银行卡">
              <el-select
                  v-model="rechargeBankcard"
                  placeholder="Select"
                  style="width: 240px"
              >
              <el-option
                  v-for="item in bankcardList"
                  :key="item.id"
                  :label="'卡号：' + item.bankCard + '  余额' + item.balance"
                  :value="item.bankCard"
              />
            </el-select>
          </el-form-item>
        </el-form>


      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="recharge">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import * as echarts from 'echarts'
import { findTotalPrice } from '@/api/total'
import {ElMessage} from "element-plus";
import {rechargePrice} from "@/api/bank";
// import {findTotalPrice} from "@/api/total";
//电子账户余额
const electronicPrice = ref(0)
//银行账户余额
const bankPrice = ref()
//每个银行卡单独余额
const bankcardList = ref([])
//理财产品总价值
const financiaPrice = ref()
//总资产
const totalPrice = ref()
//卡号
const backCard = ref()
const rechargeBalance = ref()
const rechargeBankcard = ref()

const centerDialogVisible = ref(false)

function getTotalPrice() {
  findTotalPrice().then(res => {
    if (res.code == 200) {
      electronicPrice.value = res.data.electronicPrice
      bankPrice.value = res.data.bankPrice
      bankcardList.value = res.data.bankcardList
      financiaPrice.value = res.data.financiaPrice
      totalPrice.value = res.data.totalPrice
      backCard.value = res.data.bankcardList[0].bankCard
    }
  })
}

function recharge(){
  rechargePrice(rechargeBankcard.value,rechargeBalance.value).then(res => {
       if (res.code == 200){
         ElMessage({
           message: res.message,
           type: 'success',
         })
       }
       centerDialogVisible.value =false
    getTotalPrice()
  })
}
getTotalPrice()
onMounted(() => {
  xuan1()
  xuan2()
  xuan3()
})

function xuan1() {
  var chartDom = document.getElementById('main1')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        color: 'skyblue',
      },
    ],
  }

  option && myChart.setOption(option)
}

function xuan2() {
  var chartDom = document.getElementById('main2')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        color: 'skyblue',
      },
    ],
  }

  option && myChart.setOption(option)
}

function xuan3() {
  var chartDom = document.getElementById('main3')
  var myChart = echarts.init(chartDom)
  var option
  var scale = 1
  var echartData = [
    {
      value: 2154,
      name: '曲阜师范大学',
    },
    {
      value: 3854,
      name: '潍坊学院',
    },
    {
      value: 3515,
      name: '青岛职业技术学院',
    },
    {
      value: 3515,
      name: '淄博师范高等专科',
    },
    {
      value: 3854,
      name: '鲁东大学',
    },
    {
      value: 2154,
      name: '山东师范大学',
    },
  ]
  var rich = {
    yellow: {
      color: '#ffc72b',
      fontSize: 30 * scale,
      padding: [5, 4],
      align: 'center',
    },
    total: {
      color: '#ffc72b',
      fontSize: 20 * scale,
      align: 'center',
    },
    white: {
      color: '#fff',
      align: 'center',
      fontSize: 14 * scale,
      padding: [21, 0],
    },
    blue: {
      color: '#49dff0',
      fontSize: 16 * scale,
      align: 'center',
    },
    hr: {
      borderColor: '#0b5263',
      width: '100%',
      borderWidth: 1,
      height: 0,
    },
  }
  option = {
    backgroundColor: 'white',
    title: {
      text: '花费统计',
      left: 'center',
      top: '50%',
      padding: [24, 0],
      textStyle: {
        color: 'black',
        fontSize: 18 * scale,
        align: 'center',
      },
    },
    legend: {
      selectedMode: false,
      formatter: function(name) {
        var total = 0 //各科正确率总和
        var averagePercent //综合正确率
        echartData.forEach(function(value, index, array) {
          total += value.value
        })
        return '{total|' + total + '}'
      },
      data: [echartData[0].name],
      // data: ['高等教育学'],
      // itemGap: 50,
      left: 'center',
      top: 'center',
      icon: 'none',
      align: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 16 * scale,
        rich: rich,
      },
    },
    series: [
      {
        name: '总考生数量',
        type: 'pie',
        radius: ['32%', '50%'],
        hoverAnimation: false,
        color: [
          '#c487ee',
          '#deb140',
          '#49dff0',
          '#034079',
          '#6f81da',
          '#00ffb4',
        ],
        label: {
          normal: {
            formatter: function(params, ticket, callback) {
              var total = 0 //考生总数量
              var percent = 0 //考生占比
              echartData.forEach(function(value, index, array) {
                total += value.value
              })
              percent = ((params.value / total) * 100).toFixed(1)
              return (
                '{white|' +
                params.name +
                '}\n{hr|}\n{yellow|' +
                params.value +
                '}\n{blue|' +
                percent +
                '%}'
              )
            },
            rich: rich,
          },
        },
        labelLine: {
          normal: {
            length: 55 * scale,
            length2: 0,
            lineStyle: {
              color: '#0b5263',
            },
          },
        },
        data: echartData,
      },
    ],
  }
  option && myChart.setOption(option)
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 90vh;
  z-index: 9;

  .top {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .top-left {
      width: 50%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;

      .card {
        width: 46%;
        height: 45%;

        .bold {
          font-weight: bold;
          font-size: 30px;
        }
      }
    }

    .top-right {
      width: 48%;
      height: 100%;

      .card {
        width: 100%;
        height: 100%;

        #main1 {
          width: 100%;
          height: 40vh;
        }
      }
    }
  }

  .bottom {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-around;

    .bottom-left {
      width: 65%;
      height: 100%;

      .card {
        width: 100%;
        height: 100%;

        #main2 {
          width: 100%;
          height: 40vh;
        }
      }
    }

    .bottom-right {
      width: 33%;
      height: 100%;

      .card {
        width: 100%;
        height: 100%;

        #main3 {
          width: 100%;
          height: 40vh;
        }
      }
    }
  }
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}
</style>
